<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flappyBird</title>
</head>
<style>
    body {
        overflow: hidden;
    }

    .box {
        width: 30px;
        height: 30px;
        background-color: #87ceeb;
        position: absolute;
        left: 30%;
    }

    .pillarTop {
        width: 50px;
        position: absolute;
        background-color: #8877cc;
        top: 0;
        left: 100%;
    }

    .pillarBottom {
        width: 50px;
        position: absolute;
        background-color: #8877cc;
        bottom: 0;
        left: 100%;
    }

    /* .div1 {
        width: 100px;
        height: 100px;
        background-color: black;
        position: absolute;
    }

    .div2 {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        top: 20%;
        left: 50%;
    } */
</style>

<body>
    <div class="web">
        <!-- <canvas id="mycanvas" width="300" height="600"></canvas> -->

        <div class="box"></div>

        <!-- <div class="div1"></div>
        <div class="div2"></div> -->
    </div>
</body>

<!-- 
1. 碰撞检测
2. 自由落体 下落过程
3. 事件，按任何地方 年往上飞
------细分
1. 鸟 x轴一直没动  y轴受我们上下控制
2. 上下障碍物，其中一个随机生成 减去中间空间 剩下的是下障碍物高度 -->


<script>
    var box = document.querySelector(".box"),
        isBoxY = isBoxY2 = 0,
        pillarTop, pillarBottom,
        pillarHeight = 0;
    //鸟下落过程
    boxtime = setInterval(() => {
        isBoxY++;
        isBoxY2 = box.offsetTop + isBoxY;
        box.style.top = isBoxY2 + "px";
        if (isBoxY2 < 0 || isBoxY2 > innerHeight) {
            clearInterval(boxtime);
            clearInterval(time);
            clearInterval(last);
            alert("你挂了 game over");
        }
    }, 30);
    //按键盘  鸟往上飞
    onkeydown = (event) => {
        isBoxY -= 20;
    }

    // 测试碰撞检测
    // var div1 = document.querySelector(".div1");
    // var div2 = document.querySelector(".div2");

    // div1.addEventListener("mousedown", function () {
    //     document.addEventListener("mousemove", shu_biao)
    // })
    // div1.addEventListener("mouseup", function () {
    //     document.removeEventListener("mousemove", shu_biao)
    // })

    // function shu_biao(e) {
    //     div1.style.top = e.clientY - 50 + "px";
    //     div1.style.left = e.clientX - 50 + "px";
    //     if(setBox(div1,div2)){
    //         div2.style.background = "#87ceeb";
    //     }else{
    //         div2.style.background = "green";
    //     }
    // }

    //碰撞检测函数
    function setBox(objA, objB) {
        var objBl = objB.offsetLeft;
        var objBt = objB.offsetTop;
        var objBr = objBl + objB.offsetWidth;
        var objBb = objBt + objB.offsetHeight;


        var objAt = objA.offsetTop + objA.offsetHeight;
        var objAl = objA.offsetWidth + objA.offsetLeft;
        var objAr = objA.offsetLeft;
        var objAb = objA.offsetTop;

        if (objAt > objBt && objAl > objBl && objBr > objAr && objAb < objBb) {
            return true
        }
        else {
            return false;
        }
    }

    //随机柱子高度函数
    function pillar() {
        return parseInt(Math.random() * 450 + 50);
    }


    //生成障碍物
    function setpillar() {
        pillarHeight = pillar();
        pillarTop = document.createElement("div");
        pillarTop.className = "pillarTop";
        pillarTop.leftData = '105';
        pillarTop.style.height = pillarHeight + "px";
        document.body.appendChild(pillarTop);

        pillarBottom = document.createElement("div");
        pillarBottom.className = "pillarBottom";
        pillarBottom.leftData = '105';
        pillarBottom.style.height = innerHeight - pillarHeight - 200 + "px";
        document.body.appendChild(pillarBottom);
    }

    setpillar();
    last = setInterval(setpillar, 500);

    time = setInterval(() => {
        var pillarTop_lis = document.querySelectorAll(".pillarTop"),
            pillarBottom_lis = document.querySelectorAll(".pillarBottom");
        pillarTop_lis.forEach(run);
        pillarBottom_lis.forEach(run);
    }, 60);

    function run(lis_obj) {
        lis_obj.style.left = lis_obj.leftData - 1 + "%";
        lis_obj.leftData = lis_obj.leftData - 1;
        if (setBox(box, lis_obj)) {
            clearInterval(boxtime);
            clearInterval(time);
            clearInterval(last);
            alert("你挂了 game over");
        }
    }
</script>

</html>